<style type="text/css">
.formConfirmType1, .formConfirmType2 {
	max-width: 760px;
	padding: 29px 29px 19px 29px;
	margin: 0 auto 20px;
	background-color: #FFF;
	border: 1px solid #E5E5E5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}

.tableInvoice {
	max-width: 820px;
	margin: 0 auto 20px;
	background-color: #FFF;
	border: 1px solid #E5E5E5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}

.center-block {
	max-width: 460px;
	padding: 29px 29px 19px 29px;
	margin: 0 auto 20px;
}

.table-bordered td:not(:first-child) {
	border-left: 1px solid #DDD;
}
.table-bordered th:not(:first-child) {
	border-left: 1px solid #DDD;
}
</style>
<h3 class="text-center">แจ้งชำระเงิน</h3>
<!-- 
<div class="center-block">
<label><strong>รูปแบบการแจ้ง</strong></label>
<input type="radio" class="confirmType" name="confirmTypeChose" value="0" checked /> ใส่รายละเอียอดการโอนเงิน<br />
<input type="radio" name="confirmTypeChose" class="confirmType" value="1" /> upload slip โอนเงิน (png, jpf, gif)<br />
</div>
 -->
<div class="tableInvoice">
	<table class="table table-bordered" style="margin: 0; border: none;">
		<thead>
			<tr>
				<th>id</th>
				<th>รายละเอียด</th>
				<th>วันที่</th>
				<th>เงิน</th>
			</tr>
		</thead>
		<tbody>
		<?php foreach ($params['invoices'] as $key => $value){
			$dateTime = new DateTime($value['createTime']);
			$dateCreate = $dateTime->format('j/d/Y');
			$nl2brInfo = nl2br("ประเภท {$value['type']}
			package {$value['package']['name']}
			".$value['info']);
			$value['price'] = Helper::formatMoney($value['price']);
			echo <<<HTML
			<tr>
				<td>{$value['id']}</td>
				<td>{$nl2brInfo}</td>
				<td>{$dateCreate}</td>
				<td>{$value['price']} บาท</td>
			</tr>
HTML;
		}?>
			<tr class="info">
				<td colspan="3">รวม</td>
				<td><?php echo Helper::formatMoney($params['priceAll']);?> บาท</td>
			</tr>
		</tbody>
	</table>
</div>
<form method="post" class="formConfirmType1" enctype="multipart/form-data">
	<fieldset class="pull-left">
		<legend>
			แจ้งชำระเงิน<br />
			<small>ยอดชำระ <?php echo Helper::formatMoney($params['priceAll'], true);?> บาท</small>
		</legend>
		<label>invoiceId</label>
		<input type="text" name="invoiceIds" value="<?php echo $params['invoiceId'];?>" readonly="readonly" /><br />
		<label>ธนาคารที่โอน</label>
		<select name="bank">
			<option value="ธนาคารกสิกรไทย เลขบัญชี 511-2-10801-9" selected>ธนาคารกสิกรไทย เลขบัญชี 511-2-10801-9</option>
			<option value="ธนาคารไทยพาณิชย์ เลขบัญชี 868-2-17749-1">ธนาคารไทยพาณิชย์ เลขบัญชี 868-2-17749-1</option>
			<option value="ธนาคารกรุงเทพ เลขบัญชี 531-0-74527-7">ธนาคารกรุงเทพ เลขบัญชี 531-0-74527-7</option>
		</select><br />
		<label>วันที่โอน</label>
		<div style="position: relative;">
			<input type="text" name="date" value="<?php echo date('Y-m-d');?>" class="datePicket" />
			<span style="position: absolute; left: 110%; top: 0; color: red; display: none; width: 200px;">กรุณากรอกวันที่โอน</span>
		</div>
		<label>เวลาที่โอน</label>
		<div style="position: relative;">
			<input type="text" name="time" value="" placeholder="เช่น 14:30" class="time" />
			<span style="position: absolute; left: 110%; top: 0; color: red; display: none; width: 200px;">กรุณากรอกเวลาที่โอน</span>
		</div>
		<label>จำนวนเงิน</label>
		<div style="position: relative;">
			<input type="text" name="money" class="money" />
			<span style="position: absolute; left: 110%; top: 0; color: red; display: none; width: 200px;">กรุณากรอกจำนวนเงินที่โอน</span>
		</div>
		<label class="checkbox">
			<input type="checkbox" name="taxInvoice" class="taxInvoice" /> ต้องการใบกำกับภาษี
		</label>
		
	</fieldset>
	<fieldset class="pull-left" style="margin-left: 40px;">
		<legend>
			Slip<br />
			<small>หากสะดวกสามารถแนบ slip เป็นหลักฐาน (ได้เฉพาะไฟล์ png, gif, jpg)</small>
		</legend>
		<label>แนบ slip</label>
		<input type="button" class="btn chose-file" value="Chose File" />
		<input type="file" name="slip" class="slip" style="display: none;" /> <span class="slip-name"></span>
	</fieldset>
	<div class="clear"></div>
	<p style="padding-top: 30px;">
		<input type="submit" value="submit" class="btn btn-primary" />
	</p>
</form>

<!-- 
<form method="post" style="display: none;" class="formConfirmType2" enctype="multipart/form-data">
	<h5>ยอดชำระ <?php echo $params['priceAll'];?></h5>
	<input type="hidden" name="confirmType" value="1" />
	invoiceId: <input type="text" name="invoiceIds" value="<?php echo $params['invoiceId'];?>" readonly="readonly" /><br />
	image: <input type="file" name="slip" /><br />
	<input type="submit" value="submit" class="btn" />
</form>
 -->
<script type="text/javascript">
$(function(){
	$(".datePicket").datepicker({ dateFormat: "yy-mm-dd", maxDate: "+0m +0w +0d" });
	$('.chose-file').click(function(event){
		event.preventDefault();
		$('.slip').click();
	});
	$('.slip').change(function(event){
		var file = this.files[0];
		$('.slip-name').text(file.name);
	});

	$('.formConfirmType1').submit(function(event){
		var time = $('.time', this).val();
		var money = $('.money', this).val();
		var errors = [];
		if($.trim(time) == ''){
			event.preventDefault();
			errors.push({el: $('.time', this), error: true });
		}
		else {
			errors.push({el: $('.time', this), error: false });
		}
		if($.trim(money) == ''){
			event.preventDefault();
			errors.push({el: $('.money', this), error: true });
		}
		else {
			errors.push({el: $('.money', this), error: false });
		}
		var first = true;
		for(var i in errors){
			if(errors[i].error){
				errors[i].el.next().show();
				if(first){ errors[i].el.focus(); first = false; }
			}
			else errors[i].el.next().hide();
		}
	});

	$('.time').keyup(function(event){
		if(event.keyCode != 8 && $(this).val().length == 2 && /[0-9]/.test($(this).val())) {
			$(this).val($(this).val()+':');
		}
	});
});
</script>